HOW TO

Oakland Wordpress Theme Manual

• latest Update: 01/20/2012
• By: cmsmasters
• Official website
• Support Forums
• Start personal support ticket using form here

Oakland 1.0 WordPress Theme Installation

Once you have installed WordPress (see details here) and logged in to admin panel, you can install Oakland theme.

Note: There is only one way to install Oakland theme - upload via FTP to your server, as usually server doesn't allow to install themes via WordPress if they're bigger than 2 or 10 Mb.

To upload Oakland theme to your server via FTP, you need to unzip and acopy all the files from “Oakland” folder to wp-content/themes/oakland directly on the server (use only lower case letters!). Thereafter Oakland theme will be available for activation in WP admin panel: Appearance/Themes. Again, you can activate it by clicking “Activate”.
Before activation turn all your plugins off - they may affect. We don't guarantee compatibility with additional plugins.

  Please, read this carefully before you’ll start to use Oakland theme!

For correct functionality, please, make sure the following folders have the “777” access settings:

/wp-content/themes/oakland/images/cache  
/wp-content/themes/oakland/images/social_icons 
/wp-content/themes/oakland/images/theme_icons 
/wp-content/themes/oakland/images/bgs

Page set up

To create a page you should make the following steps:
1. Go to Pages/Add New

2. Enter the title
3. Set you page options such as:
Oakland General Page Options
Oakland Custom Background Options
Oakland Page Slider Options
Oakland Page Heading Options
etc.

Once you’ve made all the previous steps, you may add the content using either visual, or HTML editor. Let’s start from the Top sidebar.

Make sure you’ve set “Use Top Sidebar” in Page Heading options.

Go to Appearance/Widgets and find a Top Sidebar there.
Drag inside of it, for example, 2 widgets: Text and CMSMS - Divider, as shown on this screenshot:

CMSMS - Divide Widget (see more in the Widgets & Sidebars Set up paragraph) will visually separate your four previous widgets from other site blocks with line, space or link.

Enter the title for the Text widget. Set the widget’s width (in this case 1/1, as we have 2 Widgets and one of them is just a divider - not taken into account; if you had 3 widgets, you could set 1/3 for each) and click “Save”:

You’ll get the same result like here (Top Sidebar is marked with a red rectangle):

You can set up Left/Right sidebars in a same way.

See more about Sidebars in the relevant paragraph.

How to set up a front page

You can set any page as your home page in few steps:
1. Create a page you’d like to be shown as a home page;
2. Go to Settings/Reading 

Tick “A static page (select below)” box in the “Front page displays section and choose your page in “Front page: select”.

Page Settings

Oakland General Page Options

Here you can choose whether you want to set:
1) A Heading with the icon:

2) A Heading with short description (tagline):

3) A Heading with icon and tagline:

4) Or just leave it Standard:

Oakland Custom Breadcrumbs Options

Basically breadcrumbs are an internal links. They make the web site navigation easier. Here is how they might look like:

Every Edit Page has a Custom Breadcrumbs Options settings

so you could add any link you need and set your personal navigation.

Oakland Page Slider Options

They allow you to enable slider at the page:

If you'll enable slider - the following menu will roll down:

And you will have an opportunity to choose the slider and set up the content visibility.

Oakland Custom SEO Options

If you'll enable custom SEO options - the following menu will roll down:

And you will have an opportunity to set the title, description and keywords customly.

Slider Manager

---

To create or manage the slider, please, follow here:

How to add new slider

Open Slider Manager and click Add new button:

Enter the name for your slider.
Upload image for the slide from your computer, URL or existing Media Library:

Note: Your image should be optimized for web and be no bigger than 2 MB, otherwise it won't upload.

Enter the title and other parameters if needed and click Insert into Post:

If you won't click this button, your image won't be added to the slider.

Use drag'n'drop to change the order of your slides.
If you'll click to Advanced View button, you'll get the following dropdown menu:

Here you may can enable or disable Caption.

It’s a field for your slide description and it may look like this:

On the screenshot it has a title, subtitle and bottom, but you can set a caption with text only, with link or using HTML tags set there <h> and others.

To add a link to your slide caption you should go to Enable Caption Link/Button, you can also use your slide as a link here:

To add a video to your slide go to Video Settings:

Enter your video URL.

There are also General Slider Settings:

Set here your slider animation speed, effect. Turn off/on all captions.

You may show slides navigation, which can be used for manual slides changing:

Pause on mouseover button will help to stop slide displaying manually, you can also show slides navigation or timing on mouseover.

Use Save as button to clone slider settings (if you'd like to have few similar sliders with different pictures, for example).

After your slider is ready, save changes and create a page where you’d like to show these slides. You must set your page options to make the slides shown. Go to “Oakland Page Slider Options” while editing the page. Tick “Enable slider” checkbox and choose recently added slider:

Logo and background

To set your logo, go to CMSMasters admin panel: Oakland/Styling Options/Logo & Favicon and upload your image. It can be any of these formats: .png, .jpg, .gif, .bmp. But make sure your file is no bigger than 2 Mb. WordPress doesn’t allow uploading images bigger than 2 Mb.

Use Background and Header Options (Oakland/Styling Options/Background and Header)

You may enable the background colored block:

and set any color of the block and the navigation dropdowns.

To manage your lines' height (content line, navigation line, Hi-H6 headings' lines, etc.) follow to Oakland/General Options/Line Height Options.

Set Menu

WordPress codex has very detailed instructions how to manage Menus. You’ll find it at http://codex.wordpress.org/WordPress_Menu_User_Guide

Widgets and Sidebars Set up

Sidebars Set up

To create or delete a Custom Sidebar go to Oakland/General Options/Sidebars.

Add Sidebar:

To enable Custom Sidebar you should open your Page or Post and go to Oakland Post Options/Custom Sidebar.

See more about Top Sidebar settings in Page Settings paragraph.

The three sidebars listed above are static for the whole site and can not be set for pages optionally. There is also Right/Left sidebar, it’s not static and can be set for every single page on your site

To manage your sidebars, again, follow to Appearance/Widgets:

You will find the following list of sidebars to the left:

As it was mentioned before, you have to drag widgets from the Available Widget list to each sidebar according to your needs

Add a Blog page and posts

The easiest way to create a blog page is:
1. Open CMSmasters admin panel
2. Find “Quick page create” at the Dashboard and click on the “Blog Page” button

3. Enter the title and Publish this page
4. Go to Appearance/Menus, choose recently created blog page and add it to the menu:

The other way is to go to WP admin Pages/Add new. You’ll get an Add Page window, where to the left you can see this menu:

Choose the Blog Template.

Every Edit Page has Oakland General Page Options for your page management.

It allows to:
1) Set any of sidebars: Right, Left, Middle, Custom or make a full width page.
2) Choose the Blog Category.
3) Set posts order type and number or items per page.
4) Set items' quantity per page.

There are as well Page Heading Options settings. They allow you to set any kind of page heading according to your preferences. Tick on the Use Custom Heading checkbox and set a unique heading, you may also use Oakland Custom Breadcrumbs Options to place the links you need, Page Slider Options to set a slider to this page, Custom Background to set a unique background and SEO Options.

How to add a Post

First you can add a category for your post in Posts/Categories

Enter your category title (Slug and Descriptopn if needed) and click Add New Category button

Then go to Posts/Add New:

Enter the title, choose the category and Post Format (more about it in paragraph Post Formats), add a content.

You can add a featured image as well. And add tags (key words) to your Post.

To set your Post’s appearance (for this Post only) go to Oakland Post Options:

You can choose Layout for each page: Right/Left Sidebar or Full Width. When one of the sidebars is enabled, you can set your Custom Sidebar. More about Sidebars see in the relevant paragraph.

You have an opportunity to:
1) Show Sharing Box:

2) Show About Author Box:

3) Show Recent, Popular and Related Box:

4) Enable Middle Sidebar.
Here is an example of how it will look in the Post:

To manage your Post Tags (remove, add, or edit) go to Posts/Post Tags. You’ll get the following window:

Where you will easily add new Tag or find existing one and edit it. You also can see which Tags are embeded to most of Posts.

Blog default options

Post Formats

You have an opportunity to change your Post Formats using this feature:

Standard

Standard Format enabled will make your Post look like this:

In fact you’ll get the Post, consisting from a picture and any length text, which will be shown partially in the list.

Aside

Aside Format enabled will make your Post look like this:

Basically you will get a short status, which can be commented by other users.

Gallery

Gallery Format enabled will make your Post look like this:

So you will get a small gallery right in the list of your posts, and if you’ll click on the post’s image, it will switch to another one.

You may easily change your image order. See the screen cast.

Link

Link Format enabled will make your Post look like this:

The title of your post will be at the same time a link to another site.

Image

Image Format enabled will make your Post look like this:

Your post will be an image with short description, and if you’ll slick on it - it will appear with a full size in the lightbox.

Quote

Quote Format enabled will make your Post look like this:

You can post any quotation using this Post Format.

Video

Video Format enabled will make your Post look like this:

You can add a video to your post (using video URL) and it can be played right in the post list in smaller size, or on the Post page. We've created our CMSMS media player, so it's controls appear only when mouse is on the video.

Audio

Audio Format enabled will make your Post look like this:

You can add an audio to your post and it can be played right in the post list, or on the Post page.

Note: You should type in the audio link field only in this way: mp3:link_to_the_mp3_file or ogg:link_to_the_ogg_file.
You can’t add this audio via URL from other source, it should be downloaded to your server.

The date in each of these formats leads to the post archives.

Add Portfolio

The easiest way to create a portfolio page is:
1. Go to CMSmasters admin panel.
2. Find “Quick page create” at Dashboard and  click there on “Portfolio” button

3. Enter the title.
4. In Oakland General Page Options you can choose Page Layout Type, Portfolio type (should be created first), the number of items per page, colums number, Middle Horisontal Sidebar visibility and more.

2. Choose your Project Format
1. Slider
2. Video
3. Album

Then “Delete” and “Continue”.

Note: There is one important trick you should know about adding video. The picture of your video in the portfolio posts list doesn’t appear by default – you should set it by yourself via “Featured image”, otherwise your video won’t run – WordPress won’t recognize it and be able to show it in the menu, nor even after you just click “Preview”.

If you’d  like to create Portfolio with sorting, you might need to use Categories.
Go to Portfolio/Project Categories

And create a category there. Enter a Name and click “Add New Category”.

Then set this category for the projects you need. Once you got to editing project page in admin panel, you’ll find there “Project Categories” block.

And don’t forget to click Publish/Update button.

If you need to create few Portfolio pages, you can use Portfolio Types.
Create or Edit some project and set a type for it.

Publish it with this type enabled.
Then go to portfolio page in WP admin panel and select your portfolio type

Note: This option appears only for those pages, which have “Portfolio” set in Page Attributes.

The next step. Publish/Update this page and there will be shown only projects with type selected. For the other portfolio pages you can use new type to get posts with different projects.
To manage, add, delete, rename types you can use Portfolio/Portfolio Types tab.

Project options

To set your Project unique appearance (for this Project only) go to Oakland Project Options. Every Edit Project page has an access to them.

You can choose Layout for each page: Right/Left Sidebar or Full Width. When one of the sidebars is enabled, you can set your Custom Sidebar.

Contact Page

How to set up the Contact Page using Form Builder 1.2

Create unlimited contact forms!
Use fields, text areas, drop-downs, radiobuttons, checkboxes etc.
Set verification and fields that are required. You can set view of mails you’ll receive with “Message composer”. Enable/disable reCaptcha and even add your forms in sidebars!

To set up the reCaptcha go to Oakland/General Options/Theme Options. Enter your reCAPTCHA public and privat keys. You can get them here.

Fonts set up

Oaklandtheme gives you an opportunity to set more than 400 fonts from the base of Google Web Fonts.

de_DE means to translate your site into German

fr_FR means to translate into French

it_IT means Italian

pt_PT means to translate into Portuguese

pl_PL means Polish

es_ES means to translate your site into Spanish

ru_RU means to translate into Russian

tr_TR means to translate into Turkish

Note: You will find all the language files by following to wp-sontent/themes/oakland/themes/languages.

If you’ve noticed any incongruity in our translations, please feel free to tell us about it at our Support forum.

If there is no language needed in our base, you can download your own language files and edit wp-config.
To create your own language file or make changes in translation you should install Poedit:

To change the texts of translations or customize some texts in your site’s messages, open .po file in Poedit. You’ll get the list of messages and common phrases. Select a text you’d like to edit and enter changes in a lower field. Before closing don’t forget to save changes.

To create your own language file, please, copy the en_EN.po (or any of those .po files we have in “languages” folder) file from folder, run Poedit and go to File/New catalog from POT file.

Find the file en_EN.po uploaded recently and set it as your .po translation template. You’ll get the following list:

You must enter new text to the field in the bottom of the window – it will be saved for each item automatically. Edit all the messages you need and save changes to the file before closing. The program will create two files with similar names: .po and .mo.

Copy these two files to your server: wp-sontent/themes/oakland/theme/languages. Add the new file’s name to your wp-config.php file inside of empty quotes in the line

define('WPLANG', '');

Note: Don’t enter a file type to the line. For examble, define('WPLANG', 'lg_LG.po') is incorrect!

Shortcodes

You will find the examples of the Shortcodes at our preview site here > Features > Shortcodes. Please, watch the screen cast as well.

You may show/hide Kitchen Sink by clicking Alt + Shift + Z or press this button in the visual editor:

And the following buttons will appear:

For your convenience all the shortcodes were grouped and have dropdowns. It will save your time and is more graphically.

And you will find same shortcodes right in the HTML menu!

Click once - and you'll open the tag, second click will close it down. If you have added many shortcodes you may use this button to close all the tags:

Use Fullscreen to make editing more pleasant.

You will get all the shortcodes without dropdowns in the visual editor:

Footer Options

---

Go to Oakland/Styling Options/Footer Options to set your footer visibility and change the text inside of it: